<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直导航栏</title>
    <style>

        ul {
           /* 删除边距和填充*/
            list-style-type: none;/*移除列表前小标志。一个导航栏并不需要列表标记*/
            margin: 0;      /*移除浏览器的默认设置，将边距设置为0*/
            padding: 0;     /*移除浏览器的默认设置，将填充设置为0*/
            width: 200px;
            background-color: #f1f1f1;
        }
        /*垂直导航栏*/
   /*     a
        {
            display:block;
            width:60px;     !*块元素默认情况下是最大宽度。我们要指定一个60像素的宽度*!
        }*/

        li a {
            display:block; /*显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度*/
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }
        /* 鼠标移动到选项上修改背景颜色 */
        li a.active {
            background-color: #4CAF50;
            color: white;
        }
        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
</ul>

<p>注意：这里我们用 href="#"作为测试连接。但在一个真正的 web 站点上需要真实的 url。</p>

</body>
</html>